import React from 'react'
import '../scss/geren.scss'
class Geren extends React.Component {
    constructor() {
        super()
        this.state = {
            data: [
                {
                    p1: '',
                    p2: '',
                    p3: '',
                    p4: ''
                },
                {
                    p1: '',
                    p2: '',
                    p3: '',
                    p4: ''
                },
                {
                    p1: '',
                    p2: '',
                    p3: '',
                    p4: ''
                },
                {
                    p1: '',
                    p2: '',
                    p3: '',
                    p4: ''
                },
                {
                    p1: '',
                    p2: '',
                    p3: '',
                    p4: ''
                },
            ],
            placeholder: [
                {
                    p1: '个人形象',
                    p2: '通过生活照来展示你的形象',
                    p3: '提高对企业的吸引力',
                    p4: '完善个人形象'
                }, {
                    p1: '求职意向',
                    p2: '填写准确的期望工作能大大提高求职成功率哦…',
                    p3: '快来添加期望工作吧！',
                    p4: '添加期望工作'
                }, {
                    p1: '工作经历',
                    p2: '针对销售职位定制的工作经历，更加专业',
                    p3: '可以更加充分的展示你的工作能力',
                    p4: '添加教育经历  添加培训经历'
                }, {
                    p1: '证书',
                    p2: '展示你获取的各种证书',
                    p3: '能更多的获取HR的眼球哦',
                    p4: '添加证书'
                },
                {
                    p1: '外语水平',
                    p2: '展现你良好的外语水平',
                    p3: '可以提升你的职业竞争力欧',
                    p4: '添加外语水平'
                },
            ]
        }
    }
    setNum({ target }, index) {
        const shu = [...this.state.data],
            name = target.name
        shu[index][name] = target.value
        console.log(shu)
        this.setState({
            data: shu
        })
    }
    render() {
        const { placeholder, data } = this.state
        return (
            <>
                <div className='box'>
                    <div className='main'>
                        {
                            placeholder.map((item, index) => {
                                return <div className='center' key={index}>
                                    <div className="c_table">
                                        <p>{item.p1}</p>
                                    </div>
                                    <div className='c_cen'>
                                        <div className='left'>
                                            <img src={require('./未标题-1.png').default} alt="" />
                                        </div>
                                        <div className='left'>
                                            <input
                                                value={data[index].p2} placeholder={item.p2}
                                                onChange={(e) => this.setNum(e, index)}
                                                name='p2' />
                                            <input
                                                value={data[index].p3} placeholder={item.p3}
                                                onChange={(e) => this.setNum(e, index)}
                                                name='p3' />
                                            <h3>
                                                {item.p4}
                                            </h3>
                                        </div>
                                        <div className='clear'></div>
                                    </div>
                                </div>
                            })
                        }

                    </div>
                </div>
            </>
        )
    }
}
export default Geren